<template>
  <div>
    <div id="main">
      <el-button type="primary"
                 icon="el-icon-s-home"
                 circle
                 @click="main"></el-button>
    </div>
    <div id="selectDiv">
      <el-select v-model="value">
        <el-option label="用 户"
                   value="1"> </el-option>
        <el-option label="内 容"
                   value="2"> </el-option>
      </el-select>
    </div>
    <div id="inputDiv">
      <el-input placeholder="请输入"
                v-model="input3"
                class="input-with-select"
                prefix-icon="el-icon-search"
                @change="search">
      </el-input>
    </div><br>
    <div id="tableDiv">
      <el-table id="table"
                :data="tableData"
                stripe
                height="550px"
                style="width: 100%">
        <el-table-column prop="account"
                         label="用户"
                         align="center">
        </el-table-column>
        <el-table-column prop="time"
                         label="时间"
                         align="center">
        </el-table-column>
        <el-table-column prop="info"
                         label="详细信息"
                         align="center">
          <!-- 作用域插槽 -->
          <template slot-scope="tdimage">
            <el-button type="primary"
                       plain
                       @click="info(tdimage)">查看</el-button>
          </template>
        </el-table-column>
        <el-table-column prop="status"
                         label="删除"
                         align="center">
          <!-- 作用域插槽 -->
          <template slot-scope="td">
            <el-button type="danger"
                       icon="el-icon-delete"
                       circle
                       @click="delrecent(td.row)"></el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 信息框 -->
    <el-dialog title="动态详情"
               :visible.sync="dialogVisible"
               width="60%">
      <h5> {{currentinfo.account}} / {{currentinfo.time}}</h5>
      <h3>{{currentinfo.content}}</h3>
      <el-image style="width: 100px; height: 100px"
                :src="currentinfo.image"
                fit="fit"></el-image>
      <span slot="footer"
            class="dialog-footer">
      </span>
    </el-dialog>

  </div>
</template>

<script>
import axios from '../../../axios_config';
import Commons from '../../../js/commons'
export default {
  data () {
    return {
      input3: "",
      value: "1",
      tableData: [],
      dialogVisible: false,
      currentinfo: {}
    }
  },
  mounted () {
    this.find(0);
  },
  methods: {
    find (type) {
      axios.get("http://192.168.11.18:8080/recent/findType?type=" + type + "&content=" + this.input3).then(res => {
        this.tableData = res.data.data;
      });
    },
    main () {
      this.find(0);
    },
    search () {
      if (this.input3 != "") {
        this.find(this.value);
        this.input3 = "";
      }
    },
    info (tdimage) {
      //强制刷新
      this.refresh = false;
      this.$nextTick(() => {
        this.refresh = true;
      });
      this.currentinfo = tdimage.row;
      this.dialogVisible = true;
    },
    updateData (data) {
      //关闭对话框
      this.dialogVisible = false;
    },
    delrecent (row) {
      axios.get("http://192.168.11.18:8080/recent/delRecent?id=" + row.id).then(res => {
        if (res.data.state == "SUCCESS") {
          for (let i = 0; i < this.tableData.length; i++) {
            if (this.tableData[i].id == row.id) {
              this.tableData.splice(i, 1);
              this.$message({ type: 'success', message: '删除成功!' });
              break;
            }
          }
        } else {
          alert(res.data.message);
        }
      });
    }
  },
}
</script>

<style scoped>
#main {
  float: left;
  margin-top: 2%;
  margin-right: 2%;
}
#selectDiv {
  float: left;
  width: 8%;
  margin-top: 2%;
}
#inputDiv {
  float: left;
  width: 30%;
  margin-top: 2%;
}
#tableDiv {
  width: 100%;
  height: 550px;
  margin-top: 4%;
}
h5 {
  margin-top: 0%;
  margin-bottom: 5%;
}
</style>